import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import { CommonStore } from './help'
import tabs, { TabsState } from '../store/modules/tabs'
import user, { UserState } from './modules/user'
import createPersistedState from 'vuex-persistedstate'
import Cookies from 'js-cookie'
export type RootState = {
  user: UserState
  tabs: TabsState
}

export const modules = {
  tabs: tabs,
  user: user
}

export const key: InjectionKey<Store<RootState>> = Symbol()

export const store = createStore<RootState>({
  modules,
  plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: {
        getItem: key => {
          return Cookies.get(key)
        },
        setItem: (key, value) => Cookies.set(key, value, { expires: 1, secure: false }),
        removeItem: key => Cookies.remove(key)
      },
      // 存储的 key 的key值
      key: 'store',
      paths: ['user']
    })
  ]
}) as CommonStore

// 定义自己的 `useStore` 组合式函数
export function useStore() {
  return baseUseStore(key) as CommonStore
}
